<template>
    <div class="jian">

        <div class="header">
            <router-link to="xingzhi">
                <van-icon name="arrow-left" class="fanhui" />
            </router-link>
            <h1>星值商品详情</h1>

        </div>
        <div class="nav">
            <div>
                <van-image class="img" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpe">
                    <template v-slot:loading>
                        <van-loading type="spinner" size="20" />
                    </template>
                </van-image>
            </div>
            <div id="nav_a">
                <h2>
                    roopy润培 植物香氛护手霜
                </h2>
                <p>5670星值
                    <span id="sp">49.00</span>
                </p>
                <span class="btn">
                    <van-button icon="minus" type="primary"
                        :style="{ backgroundColor: '#fff', color: '#000', border: '1px solid' }" @click="jian" />
                    {{ num }}
                    <van-button icon="plus" type="primary"
                        :style="{ backgroundColor: '#fff', color: '#000', border: '1px solid' }" @click="num++" />
                </span>

            </div>
            <div>
                <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpe">
                    <template v-slot:loading>
                        <van-loading type="spinner" size="20" />
                    </template>
                </van-image>
            </div>
        </div>
        <span class="foot">您的星值不足</span>
    </div>

</template>
<script>
export default {
    data() {
        return {
            num: 1,

        }
    },
    methods: {
        jian() {

            // if (this.num == 1) {
            //     this.num = 1

            // } else {
            //     this.num--
            // }
            this.num == 1 ? this.num = 1 : this.num--
        }
    },
}


</script>
<style scoped>
.jian {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: space-between;
}

.header {
    width: 100%;
    height: 50px;
    /* background-color: rgba(248, 248, 248, 100); */
    /* position: relative; */
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.fanhui {
    color: black;
    font-size: 23px;
    font-weight: bolder;
    left: 10px;
    top: 10px;

}

h1 {
    margin-top: 10px;
}

.nav {
    width: 100%;
    height: 80%;

}

.img {
    width: 100%;
    height: 100%;
}

.nav>div {
    width: 100%;
    height: 40%;
    display: flex;
    justify-content: center;
    background: var(--van-image-placeholder-background-color);
}

.btn {
    display: block;
    display: flex;
    width: 50%;
    height: 60%;
    justify-content: space-between
}

#nav_a {
    width: 100%;
    height: 20%;
    background-color: #fff;
    padding: 10px 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

h2 {
    font-size: 26px;
}

p {
    font-size: 24px;
}

#sp {
    font-size: 14px;
    text-decoration: line-through;

}

.foot {
    width: 80%;
    height: 10%;
    display: flex;
    margin-left: 10%;
    flex-direction: column;
    justify-content: space-around;
    background-color: #777;
    color: #fff;
    border-radius: 10px;
    text-align: center;
    margin-bottom: 30px;
}
</style>